<template>
  <div class="nickname">
    <mt-header class="header" title="昵称">
      <router-link to="/myheader" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <mt-button style="color:red;" slot="right" @click="save">保存</mt-button>
    </mt-header>
    <div class="update">
      <input type="text" v-model="nick">
      <span v-show="dele == 1" @click="del" class="icon">
        <img  src="../assets/delete.png" alt="">
      </span>
    </div>
  </div>
</template>
<script>
import {mapState,mapMutations} from "vuex"
export default {
  computed:{
    ...mapState(["user","islogin"])
  },
  data(){
    return {
      nick:"",
      dele:1
    }
  },
  mounted(){
    // console.log(this.dele)
    // console.log(this.user[0].nickname)
    if(this.islogin == 1){
      if(this.nick == null){
        this.dele = 0
      }else{
        this.dele = 1
      }
      this.nick = this.user[0].nickname
      console.log(this.nick)
    }
  },
  methods:{
    ...mapMutations(["setuser","setislogin"]),
    del(){
      this.nick = ""
      this.dele = false
    },
    save(){
      this.axios.post("/bo_user/v1/update",`nickname=${this.nick}&uid=${this.user[0].uid}`).then(result=>{
        console.log(result.data)
        this.axios.get(`/bo_user/v1/search/:uid`,{
          params:{
            uid:this.user[0].uid
          }
        }).then(result=>{
          console.log(result.data)
          this.$store.commit("setuser",result.data)
          this.$store.commit("setislogin",1)
          // console.log(this.user)
          sessionStorage.setItem("user",JSON.stringify(result.data))
          console.log(JSON.stringify(result.data))
          sessionStorage.setItem("islogin",1)
          this.$toast({
            message:"修改成功"
          })
          this.$router.push("/my")
        })
      })
    }
  },
  watch:{
    nick(){
      if(this.nick == ""){
        this.dele = 0
      }else{
        this.dele = 1
      }
    }
  }
}
</script>
<style scoped>
.nickname { 
  background-color: #F2F0E8;
  height: 666px;
}
.nickname > .header {
  background-color: #fff;
  color: #000;
}
.nickname > .update {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
}
.nickname > .update > input {
  outline: none;border: none;
  caret-color: orange;
}
.nickname > .update > span {
  position: fixed;
  right: 20px;
}

</style>